<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //封装一个Vue实现数据代理
        function Vue({data}){
            //在Vue内部把数据放在了vm._data上
            this._data=data
              //但是模板中是直接去vm身上获取数据的,每次都要_data.xxx不方便,
        //所以我们可以在vm上放一份数据进行数据代理,代理_data中的数据
        //当获取vm的数据时,其实获取的还是_data中的数据,设置vm的数据时,设置的也是_data中的数据
        
        //1.遍历_data的数据 在vm上放一份    
        for(let key in this._data){
             //给已经存在的实例对象vm 扩展一些属性,并且设置存取器属性,需要使用Object.defineProperty
                Object.defineProperty(this,key,{
                    get:function proxyGetter(){
                        //当被读取的时候,去_data中获取值
                        return this._data[key]
                    },
                    set:function proxySetter(val){
                        this._data[key]=val
                    }
                })
            }
        }
        const vm=new Vue({
            data:{
                count:1,
                price:299
            }
        })
        console.log(vm);
    </script>
</body>
</html>